<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <!--当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.-->
    <!--下面的例子中的元素的总宽度为300px：-->
    <!--让我们自己算算：-->
    <!--300px (宽)-->
    <!--+ 50px (左 + 右填充)-->
    <!--+ 50px (左 + 右边框)-->
    <!--+ 50px (左 + 右边距)-->
    <!--= 450px-->
    <style>
        div
        {
            background-color: lightgrey;
            width: 300px;
            border: 25px solid green;
            padding: 25px;
            margin: 25px;
        }
    </style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有25px内间距，25外间距、25px绿色边框。</div>
</body>
</html>